<template>
  <section>
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="">
            <el-select size="mini" @change="getFavList" v-model="listQuery.catId" filterable placeholder="分类">
                <el-option
                v-for="item in mCatList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="" v-if="listQuery.catId!=10">
            <el-select size="mini" v-model="listQuery.favId" filterable placeholder="选品库">
                <el-option
                v-for="item in favList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <template v-else>
            <el-form-item label="">
                <el-input  size="mini" type="text" class="w200" placeholder="搜索关键词" v-model="listQuery.keyword" />
            </el-form-item>
            <el-form-item label="">
                <el-select clearable size="mini" v-model="listQuery.sort" placeholder="排序">
                    <el-option
                    v-for="item in sortList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </template>
        <!-- <el-form-item label="">
            <el-select size="mini" v-model="listQuery.pid" filterable placeholder="推广位">
                <el-option
                v-for="item in pidList"
                :key="item.pid"
                :label="item.pidName"
                :value="item.pid">
                </el-option>
            </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="">
            <common-input @keyup.enter.native="handleFilter" class="w200" placeholder="商品关键字" v-model="listQuery.keyword" />
        </el-form-item> -->
        <!-- <el-form-item label="">
            <el-checkbox-group v-model="activityTags">
                <el-checkbox v-for="item in activityList" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item> -->
        <el-form-item label="">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
        </el-form-item>
      </el-form>
    <template v-if="list && list.length>0">
        <div class="goods-box" :style="{height:tableHeight+'px'}">
            <template v-for="item in list">
                <div :key="item.id" class="good" :class="{'active':item.materialUrl}">
                    <div class="delete" @click="handleDelete(item)" v-if="item.canDelete==1"><i class="el-icon-delete"></i></div>
                    <div class="pic" @click="openItem(item)">
                        <img :src="item.goodsImageUrl" />
                        <span class="status">{{ item.statusText }}</span>
                    </div>
                    <div class="cont">
                        <div class="title ellipsis2" @click="openItem(item)">{{item.goodsName}}</div>
                        <div class="label" v-if="item.hasCoupon">
                            <span>{{ item.couponDiscountYuan }}元券</span>
                        </div>
                        <div class="label" v-else style="visibility:hidden;">
                            <span>{{ item.couponDiscountYuan }}元券</span>
                        </div>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <p>
                                    ￥{{ item.hasCoupon ? item.finalPrice : item.price }}
                                </p>
                                <p class="d">
                                    <template v-if="item.hasCoupon">券后</template>
                                    <template v-else>价格</template>
                                </p>
                            </el-col>
                            <el-col :span="8">
                                <p style="color:red;">
                                    ￥{{ item.promotionAmount }}
                                </p>
                                <p class="d">
                                    佣金
                                </p>
                            </el-col>
                            <el-col :span="8">
                                <p style="color:red;">
                                    {{ item.promotionRateBai }}%
                                </p>
                                <p class="d">
                                    比例
                                </p>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" style="font-size:12px;color:#666;margin-top:6px;">
                            <el-col :span="12">
                                <div class="ellipsis" style="height:16px;line-height:16px;">销量：{{ item.volume }}</div>
                            </el-col>
                            <el-col :span="12" style="text-align:right;">
                                <div class="ellipsis" style="height:16px;line-height:16px;">{{ item.mallName }}</div>
                            </el-col>
                        </el-row>
                        <div class="block2" style="padding-top:10px;">
                            <el-button :disabled="item.select==1" size="mini" @click="handleUpdate(item)" type="primary">选品入库</el-button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
    </template>
    <div v-else style="color:#999;">还没有商品</div>

    <el-dialog title="选品入库" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="500px" @close="dialogClose">
        <el-form :model="form" :rules="rules" ref="form" label-width="150px">
            <!-- <el-form-item label="类型" prop="status">
                <el-radio-group v-model="form.multiGroup">
                    <el-radio :label="0">单人团</el-radio>
                    <el-radio :label="1">双人团</el-radio>
                </el-radio-group>
            </el-form-item> -->
            <el-form-item label="分类1：" prop="catIds">
                <el-cascader
                    style="width:100%;"
                    filterable
                    :props="{ value: 'id', label: 'name' }"
                    size="mini"
                    v-model="form.catIds"
                    :options="cateList"></el-cascader>
            </el-form-item>
            <el-form-item label="分类2：" prop="catIds2">
                <el-cascader
                    clearable
                    style="width:100%;"
                    filterable
                    :props="{ value: 'id', label: 'name' }"
                    size="mini"
                    v-model="form.catIds2"
                    :options="cateList"></el-cascader>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cancel('form')">取消</el-button>
            <el-button :loading="checkLoading" size="mini" type="primary" @click="check('form')">确定</el-button>
        </div>
    </el-dialog>
  </section>
  
</template>

<script>
    import {
        retail_product_cat_tree,
        retail_product_save
    } from '../../api/retail_product';
    import {
        taoke_list,
        taoke_fav_list,
        taoke_material_cat_list,
        taoke_material_list
    } from '../../api/taoke';
    export default {
        components: {
        },
        data() {
            return {
                mCatList: [],
                favList: [],
                cateList:[],
                checkLoading: false,
                dialogFormVisible: false,
                form: {
                    mallName:'',
                    catIds: [],
                    title: undefined,
                    imgUrl: undefined,
                    price: undefined,
                    promotionRate: undefined,
                    promotion: undefined,
                    orderNum: undefined,
                    parentCateId: undefined,
                    cateId: undefined,
                    couponDiscount: undefined,
                    hasCoupon: 0,
                    platform: 1,
                    platformId: undefined,
                    url: undefined,
                    couponUrl: undefined,
                    parentCateId: 0,
                    cateId: 0,
                    thirdCateId: 0,
                    keyword: undefined,
                    catIds2: [],
                    parentCateId2: undefined,
                    cateId2: undefined,
                    thirdCateId2: 0,
                },
                tableHeight: 200,
                list: null,
                listLoading: true,
                listQuery: {
                    catId: undefined,
                    favId: undefined,
                    pageNum: 1,
                    pageSize: 100,
                    keyword: undefined,
                    auditStatus: '1',
                    contractEnd: undefined,
                    eliteId: 1,
                    sort:undefined,
                    activityTags: "",
                    pid: undefined,
                },
                activityTags: [],
                total: null,
                activeName: '1',
                currentId: 0,
                catList: [],
                pidList: [],
                rules: {
                    catIds: [
                        {
                            required: true,
                            message: '请选择商品分类',
                            trigger: 'blur'
                        }
                    ],
                },
                siteList: [
                    {
                        id: 1,
                        name: "好券商品"
                    },
                    {
                        id: 2,
                        name: "精选卖场"
                    },
                    {
                        id: 10,
                        name: "9.9包邮"
                    },
                    {
                        id: 15,
                        name: "京东配送"
                    },
                    {
                        id: 22,
                        name: "实时热销榜"
                    },
                    {
                        id: 23,
                        name: "为你推荐"
                    },
                    {
                        id: 24,
                        name: "数码家电"
                    },
                    {
                        id: 25,
                        name: "超市"
                    },
                    {
                        id: 26,
                        name: "母婴玩具"
                    },
                    {
                        id: 27,
                        name: "家具日用"
                    },
                    {
                        id: 28,
                        name: "美妆穿搭"
                    },
                    {
                        id: 30,
                        name: "图书文具"
                    },
                    {
                        id: 31,
                        name: "今日必推"
                    },
                    {
                        id: 32,
                        name: "京东好物"
                    },
                    {
                        id: 33,
                        name: "京东秒杀"
                    },
                    {
                        id: 34,
                        name: "拼购商品"
                    },
                    {
                        id: 35,
                        name: "高收益榜"
                    },
                    {
                        id: 36,
                        name: "自营热卖榜"
                    },
                    {
                        id: 108,
                        name: "秒杀进行中"
                    },
                    {
                        id: 109,
                        name: "新品首发"
                    },
                    {
                        id: 110,
                        name: "自营"
                    },
                    {
                        id: 112,
                        name: "京东爆品"
                    },
                    {
                        id: 125,
                        name: "首购商品"
                    },
                    {
                        id: 129,
                        name: "高佣榜单"
                    },
                    {
                        id: 130,
                        name: "视频商品"
                    },
                    {
                        id: 153,
                        name: "历史最低价商品榜"
                    },
                    {
                        id: 210,
                        name: "极速版商品"
                    },
                    {
                        id: 238,
                        name: "新人价商品"
                    },
                    {
                        id: 247,
                        name: "京喜9.9"
                    },
                    {
                        id: 249,
                        name: "京喜秒杀"
                    },
                    {
                        id: 1000,
                        name: "招商团长"
                    },
                    {
                        id: 1001,
                        name: "选品库"
                    },
                ],
                sortList: [
                    {
                        id: 1,
                        name: "价格降序"
                    },
                    {
                        id: 2,
                        name: "价格升序"
                    },
                    {
                        id: 3,
                        name: "佣金比例降序"
                    },
                    {
                        id: 4,
                        name: "佣金比例升序"
                    },
                    {
                        id: 5,
                        name: "佣金降序"
                    },
                    {
                        id: 6,
                        name: "佣金升序"
                    },
                    {
                        id: 7,
                        name: "累计推广量降序"
                    },
                    {
                        id: 8,
                        name: "累计推广量升序"
                    },
                    {
                        id: 9,
                        name: "匹配分降序"
                    },
                    {
                        id: 10,
                        name: "匹配分升序"
                    },
                ],
                activityList: [
                    {
                        id: 4,
                        name: "秒杀"
                    },
                    {
                        id: 7,
                        name: "百亿补贴"
                    },
                    {
                        id: 31,
                        name: "品牌黑标"
                    },
                    {
                        id: 10564,
                        name: "官方直推爆款"
                    },
                    {
                        id: 10584,
                        name: "团长推荐"
                    },
                    {
                        id: 24,
                        name: "品牌高佣"
                    },
                ]
            }
        },
        mounted() {
            const that = this

            window.onresize = () => {

                return (() => {

                    that._getTableHeight()

                })()
            }
        },
        created() {
            if(this.$route.query.tab) {
                this.activeName = this.$route.query.tab;
                this.listQuery.auditStatus = this.activeName;
            }
            if(this.$route.query.pageNum) {
                this.listQuery.pageNum = this.$route.query.pageNum
                if(!this.listQuery.pageNum) {
                    this.listQuery.pageNum = 1;
                }
            }
            this._getTableHeight();
            this.getParentCateList();
            // this.getPidList();
            this.getMaterialCatList();
        },
        methods: {
            getMaterialCatList() {
                taoke_material_cat_list().then((res)=>{
                    this.mCatList = res.data;
                    console.log(res.data,'分类')
                    this.listQuery.catId = res.data[0].id;

                    if(this.listQuery.catId != 10) {
                        this.getFavList();
                    } else {
                        this.getList();
                    }
                }).catch((err)=>{

                })
            },
            getFavList() {
                taoke_material_list(this.listQuery.catId).then((res)=>{
                    this.favList = res.data;
                    if(this.favList.length > 0) {
                        this.listQuery.favId = this.favList[0].id;
                    } else {
                        this.listQuery.favId = undefined;
                    }

                    this.getList();
                }).catch((err)=>{

                })
            },
            getParentCateList() {
                retail_product_cat_tree(0).then((res)=>{
                    this.cateList = res.data
                }).catch((err)=>{
                });
            },
            check(form) {
                this.$refs[form].validate(valid => {
                    if(valid) {
                        this.form.parentCateId = (this.form.catIds && this.form.catIds.length > 0) ? this.form.catIds[0] : 0;
                        this.form.cateId = (this.form.catIds && this.form.catIds.length > 1) ? this.form.catIds[1] : 0;
                        this.form.thirdCateId = (this.form.catIds && this.form.catIds.length > 2) ? this.form.catIds[2] : 0;
                        this.form.parentCateId2 = (this.form.catIds2 && this.form.catIds2.length > 0) ? this.form.catIds2[0] : 0;
                        this.form.cateId2 = (this.form.catIds2 && this.form.catIds2.length > 1) ? this.form.catIds2[1] : 0;
                        this.form.thirdCateId2 = (this.form.catIds2 && this.form.catIds2.length > 2) ? this.form.catIds2[2] : 0;

                        this.checkLoading = true;
                        retail_product_save(this.form).then((res)=>{
                            this.checkLoading = false;
                            this.$message.success("已加入选品");
                            this.dialogFormVisible = false;

                            this.list.forEach((item)=>{
                                if(item.skuId == this.form.platformId) {
                                    item.select = 1;
                                    return false;
                                }
                            })
                        }).catch((err)=>{
                            this.checkLoading = false;

                        })
                    }
                });
            },
            dialogClose() {
                this.$refs.form.resetFields();
            },
            cancel(formName) {
                this.dialogFormVisible = false;
                this.$refs[formName].resetFields();
            },
            getCatList() {
                pdd_cat_list().then((res)=>{
                    this.catList = res.data;
                }).catch((err)=>{

                })
            },
            // getPidList() {
            //     pdd_pid_list().then((res)=>{
            //         // this.pidList = res.data;
            //     }).catch((err)=>{

            //     })
            // },
            _getTableHeight() {
                this.tableHeight = window.innerHeight - 250
            },
            getList() {
                if(this.listQuery.catId == 10) {
                    if(!this.listQuery.keyword) {
                        this.$message.error("请输入搜索关键词");
                        return;
                    }

                    taoke_list(this.listQuery).then(response => {
                        this.list = response.data.data;
                        this.total = response.data.totalCount;
                        // this.listLoading = false;
                    }).catch((err)=>{
                        
                    })
                } else {
                    if(this.listQuery.favId && this.listQuery.favId > 0) {
                        taoke_list(this.listQuery).then(response => {
                            this.list = response.data.data;
                            this.total = response.data.totalCount;
                            // this.listLoading = false;
                        }).catch((err)=>{
                            
                        })

                    } else {
                        this.list = [];
                        this.total = 0;
                    }

                }
            },
            handleFilter() {
                this.listQuery.pageNum = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            handleClick(tab, event) {
                this.listQuery.auditStatus = this.activeName;
                this.handleFilter();
            // console.log(this.activeName)
            },
            leaveTab(activeName, oldActiveName) {
            // console.log(activeName)
            // return false;
            },
            handleUpdate(row) {
                this.form.mallName = row.mallName;
                this.form.title = row.goodsName;
                this.form.imgUrl = row.goodsImageUrl;
                this.form.price = row.price;
                this.form.promotionRate = row.promotionRateBai;
                this.form.promotion = row.promotionAmount;
                this.form.couponDiscount = row.couponDiscountYuan;
                this.form.url = row.materialUrl;
                this.form.couponUrl = row.couponUrl;
                this.form.cateIds = [];
                this.form.platformId = row.skuId;
                this.form.hasCoupon = row.hasCoupon ? 1 : 0;
                this.dialogFormVisible = true;
            },
            handleSubmit(row) {
                this.$confirm('此操作将提交商品审核, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        product_submit(row.id)
                            .then(() => {
                                this.$message.success("商品已提交审核");
                                this.getList();
                            });
                    }).catch(()=>{});
                
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        product_delete(row.id)
                            .then(() => {
                                this.$message.success("商品删除成功");
                                this.getList();
                            });
                    }).catch(()=>{});
            },
            openItem(item) {
                if(item.materialUrl) {
                    window.open(item.materialUrl)
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .goods-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-bottom: 30px;
        overflow: auto;

        .good {
            width: 198px;
            height: 375px;
            background: #fff;
            -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
            box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
            border-radius: 4px;
            margin: 24px 8px 0;
            position: relative;

            &.active {
                .pic, .title {
                    cursor:pointer;
                }
            }

            .delete {
                cursor: pointer;
                display: none;
                color: #fff;
                background-color: rgba(0,0,0,.8);
                width: 31px;
                height: 31px;
                padding: 5px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                position: absolute;
                font-size: 14px;
                text-align: center;
                top: 0;
                right: 0;
                z-index: 1;
                overflow: hidden;
            }

            .label {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                margin-top: 8px;

                span {
                    padding: 0 4px;
                    line-height: 20px;
                    text-align: center;
                    font-size: 12px;
                    font-weight: 700;
                    color: #fff;
                    background: #001529;
                    border-radius: 2px;
                }
            }

            .d {
                font-size: 12px;
                color: #666;
                // margin-top: 10px;

            }

            .sub {
                font-size: 12px;
                color: #666;
                margin-top: 10px;
            }

            .title {
                font-size: 14px;
                font-weight: 700;
                color: #333;
                line-height: 16px;
                height: 32px;
            }

            .block {
                display: block;
            }

            .block2 {
                // display: none;
                text-align: center;
            }

            &.active {
                .block {
                    display: none;
                }

                // .block2 {
                //     display: block;;
                // }

                .delete {
                    display: block;
                }
            }

            .cont {
                padding: 8px;
                position: relative;
                z-index: 1;
            }

            .pic {
                width: 198px;
                height: 198px;
                border-radius: 4px 4px 0 0;
                overflow: hidden;
                position: relative;

                img {
                    width: 100%;
                    height:100%;
                }

                .detail-hint {
                    position: absolute;
                    left: 50%;
                    top: 40%;
                    -webkit-transform: translateX(-50%) translateY(-50%);
                    transform: translateX(-50%) translateY(-50%);
                    font-size: 12px;
                    color: #fff;
                    line-height: 24px;
                    padding: 0 10px;
                    border-radius: 2px;
                    opacity: 0;
                    -webkit-transition: .3s;
                    transition: .3s;
                    background: rgba(0,0,0,.8);
                }
            }

            .status {
                width: 58px;
                text-align: center;
                line-height: 26px;
                background: rgba(0,0,0,.8);
                font-size: 12px;
                color: #fff;
                font-weight: 700;
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }
    }
</style>
